<template>
  <div>
    <div class="b-title">按日统计工具借还频率</div>
    <div ref="chartRef" style="width: 100%; height: 80%" />
  </div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { useDark, useECharts } from "@pureadmin/utils";
import dayjs from "dayjs";
import { realWH } from "@/utils";

const props = defineProps({
  data: {
    default: () => []
  }
});

const list = computed(() => {
  const list = [...props.data];
  list.sort((a: any, b: any) => dayjs(a.time).diff(b.time));

  return list;
});
const xData = computed(() =>
  list.value.map((item: any) => dayjs(item.time).format("M/D"))
);
const yData1 = computed(() => list.value.map((item: any) => item.returnCount));
const yData2 = computed(() => list.value.map((item: any) => item.lendCount));

/* 图像配置 */
const chartRef = ref();
const { setOptions } = useECharts(chartRef, {
  renderer: "svg"
});
const fontSize = realWH(16).h;
const initData = () => {
  setOptions({
    tooltip: {
      trigger: "axis"
    },
    legend: {
      data: ["归还", "借出"],
      textStyle: {
        color: "#ffffff",
        fontSize
      },
      right: "5%",
      icon: "circle",
      itemWidth: realWH(14).h,
      itemHeight: realWH(14).h
    },

    grid: {
      left: "5%",
      right: "5%",
      bottom: 0,
      top: "10%",
      containLabel: true
    },
    xAxis: {
      data: xData.value,
      type: "category",
      boundaryGap: false,
      axisLabel: {
        color: "#FFFFFF",
        fontSize,
        lineHeight: fontSize + realWH(10).h
      }
    },
    yAxis: {
      show: true,
      type: "value",
      axisLabel: {
        color: "#FFFFFF",
        fontSize,
        lineHeight: fontSize + realWH(10).h
      }
    },
    series: [
      {
        name: "借出",
        type: "line",
        stack: "Total",
        data: yData2.value,
        symbol: "circle",
        symbolSize: 8,
        itemStyle: {
          color: "#46C687"
        }
      },
      {
        name: "归还",
        type: "line",
        stack: "Total",
        symbol: "circle",
        data: yData1.value,
        symbolSize: 8,
        itemStyle: {
          color: "#1E77FF"
        }
      }
    ]
  });
};
defineExpose({ initData });
</script>
